<template>
	<view class="height-screen">
		<cu-custom isBack bgColor="bg-white">
			<block slot="content">{{$t('order.confirm')}}</block>
		</cu-custom>
		<view class="flex flex-direction margin-ht" style="margin-top: 20rpx;">
			<view class="flex justify-between bg-white align-center padding radius-sm" v-if="!addressInfo.id"
				@tap.stop="handleAddress">
				<view class="flex align-center">
					<image src="@/static/img/address.png" class="flex-shrink" style="width: 28rpx;height: 31rpx;">
					</image>
					<text class="font-500 margin-left-sm text-black"
						style="font-size: 30rpx;">{{$t('order.selectAddress')}}</text>
				</view>
				<image src="@/static/img/right.png" style="width: 19rpx;height: 35rpx;" class="flex-shrink"></image>
			</view>
			<view class="flex bg-white align-center padding radius-sm" v-else @tap.stop="handleAddress">
				<image src="@/static/img/address.png" class="flex-shrink" style="width: 28rpx;height: 31rpx;">
				</image>
				<view class="flex flex-direction margin-left">
					<view class="flex align-center font-400">
						<text style="font-size: 30rpx;color: #222222;">{{addressInfo.name}}</text>
						<text style="font-size: 30rpx;color: #222222;"
							class="margin-left-sm">{{addressInfo.phone}}</text>
					</view>
					<text style="font-size: 24rpx;color: #888888;"
						class="font-400 margin-top-sm">{{addressInfo.city}}{{addressInfo.address}}</text>
				</view>
			</view>
			<view class="bg-white radius-sm flex flex-direction padding margin-top-sm">
				<view class="padding-bottom u-border-bottom flex" style="align-items: baseline;">
					<text class="text-black font-bold text-lg">{{$t('order.shopList')}}</text>
					<text
						class="text-gray font-400 text-sm margin-left-sm">{{shopList.length}}{{$t('order.shopListNum')}}</text>
				</view>
				<view class="grid gap-sm margin-top-sm">
					<view class="flex align-center padding-bottom-sm u-border-bottom" v-for="(item,index) in shopList"
						:key="index">
						<image :src="helper.handleImage(item.image)" style="width: 150rpx;height: 150rpx;"
							class="radius-xs flex-shrink">
						</image>
						<view class="flex flex-direction flex-sub margin-left-sm">
							<text class="text-black font-bold text-lg one-line">{{item.name}}</text>
							<text class="text-sm text-gray font-400 margin-tb-sm">x{{item.number}}</text>
							<view class="flex align-center">
								<text class="margin-right-sm text-red text-lg font-bold">${{item.price}}</text>
								<text class="text-gray font-400 text-sm"
									style="text-decoration-line: line-through;">{{$t('order.supermarketPrice')}}:${{item.supermarket_price}}丨{{$t('order.marketPrice')}}:${{item.market_price}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="grid gap margin-top-sm">
					<view class="flex justify-between align-center">
						<text class="font-400 text-df text-gray">{{$t('order.deliveryFee')}}</text>
						<text class="font-400 text-df text-black">${{delivery_fee || 0}}</text>
					</view>
					<view class="flex justify-between align-center">
						<text class="font-400 text-df text-gray">{{$t('order.total')}}</text>
						<text class="font-400 text-df text-black">${{totalPrice.toFixed(2)}}</text>
					</view>
					<view class="flex justify-between align-center" @tap.stop="handleCoupon">
						<text class="font-400 text-df text-gray">{{$t('order.coupon')}}</text>
						<view class="flex align-center">
							<text class="text-df text-gray font-400"
								style="line-height: 30rpx;">{{couponId?couponName:$t('order.selectCoupon')}}</text>
							<text class="cuIcon-right margin-left-xs" style="font-size: 28rpx;"></text>
						</view>
					</view>
					<view class="flex justify-between align-center">
						<text class="font-400 text-df text-gray">{{$t('order.payPrice')}}</text>
						<text class="font-400 text-df text-black">${{(totalPrice - couponPrice).toFixed(2)}}</text>
					</view>
					<view class="flex justify-between align-center">
						<text class="font-400 text-df text-gray">备注</text>
						<input type="text" placeholder="请输入备注" />
					</view>
				</view>
			</view>
			<view class="bg-white radius-sm flex flex-direction padding margin-top-sm">
				<text class="text-black font-bold text-lg">{{$t('order.payType')}}</text>
				<view class="flex justify-between align-center margin-tb-lg">
					<view class="flex align-center">
						<view class="setButton" style="width: 60rpx;height: 40rpx;">
							<image src="@/static/img/pay01.png" style="width: 31rpx;height: 38rpx;" />
						</view>
						<text class="text-df text-black font-400 margin-left">PayPal</text>
					</view>
					<text :class="payType=='paypal' ? 'cuIcon-roundcheck' : 'cuIcon-round'" style="font-size: 40rpx;"
						:style="{color:payType=='paypal'?'#06C168':''}" @tap.stop="handlePay('paypal')" />
				</view>
				<!-- 	<view class="flex justify-between align-center">
					<view class="flex align-center">
						<view class="setButton" style="width: 60rpx;height: 40rpx;">
							<image src="@/static/img/pay02.png" style="width: 60rpx;height: 36rpx;" />
						</view>
						<text class="text-df text-black font-400 margin-lr">{{$t('user.bankCard')}}</text>
						<image src="@/static/img/pay03.png" style="width: 60rpx;height: 36rpx;" />
					</view>
					<text :class="payType=='visa' ? 'cuIcon-roundcheck' : 'cuIcon-round'" style="font-size: 40rpx;"
						:style="{color:payType=='visa'?'#06C168':''}" @tap.stop="handlePay('visa')" />
				</view> -->

				<view class="flex justify-between align-center" style="margin-top: 30rpx;">
					<view class="flex align-center">
						<!-- <view class="setButton"> -->
						<image src="@/static/img/paypal.png" style="width: 60rpx;height: 60rpx;" />
						<image src="@/static/img/applypay.png" style="width: 80rpx;height: 36rpx;margin-left: 20rpx;" />
						<image src="@/static/img/visa.png" style="width: 60rpx;height: 36rpx;margin-left: 20rpx;" />
						<image src="@/static/img/master.png" style="width: 80rpx;height: 66rpx;margin-left: 20rpx;" />
						<!-- </view> -->
						<!-- <text class="text-df text-black font-400 margin-lr">Stripe/Apply pay</text> -->
						<!-- <image src="@/static/img/pay03.png" style="width: 60rpx;height: 36rpx;" /> -->
					</view>
					<text :class="payType=='Stripe' ? 'cuIcon-roundcheck' : 'cuIcon-round'" style="font-size: 40rpx;"
						:style="{color:payType=='Stripe'?'#06C168':''}" @tap.stop="handlePay('Stripe')" />
				</view>
			</view>
		</view>
		<u-gap height="100" bgColor="#f1f1f1" />
		<view style="position: fixed;bottom: 60rpx;left: 25rpx;right: 25rpx;border-radius: 55rpx;height: 110rpx;"
			class="bg-white flex justify-between align-center padding-left">
			<text class="font-bold text-black" style="font-size: 30rpx;">{{$t('order.total')}}：<text
					class="text-red">${{(totalPrice - couponPrice).toFixed(2)}}</text></text>
			<view class="setButton" @tap.stop="handleCreate"
				style="background: #06C168;border-radius:0 55rpx 55rpx 0;width: 310rpx;height: 100%;">
				<text class="font-400 text-df text-white">{{$t('public.release')}}</text>
			</view>
		</view>
		<onePicker ref="onePicker" @pickerConfirm="pickerConfirm" />
	</view>
</template>

<script>
	import {
		goods_info,
		canUseCoupon,
		orderCreate,
		createPaypalPaymentUrl,
		getDefault,
		pay_stripe
	} from '@/apis'
	import onePicker from '@/components/onePicker.vue'
	import payment from "@/utils/applePay.js";
	export default {
		components: {
			onePicker
		},
		data() {
			return {
				payType: 'paypal',
				ids: null,
				shopList: [],
				totalPrice: 0,
				couponName: '',
				couponId: '',
				couponPrice: '',
				addressInfo: {},
				cart_ids: [],
				delivery_fee: null,
			}
		},
		onLoad(options) {
			this.ids = JSON.parse(options.goods_ids)
			this.cart_ids = options.cart_ids ? options.cart_ids.split(',') : []
		},
		onReady() {
			this.goodsInfo()
			this.getDefault()
		},
		methods: {
			handlePay(type) {
				this.payType = type
			},
			async goodsInfo() {
				this.shopList = []
				let subtotal = 0
				const promises = this.ids.map(async item => {
					const shopInfo = await goods_info({
						id: item.goods_id
					})
					// 确保配送费是数值类型
					this.delivery_fee = Number(shopInfo.delivery_fee) || 0

					const itemTotal = shopInfo.price * item.num
					subtotal += itemTotal

					this.shopList.push({
						image: shopInfo.image,
						name: shopInfo.name,
						price: shopInfo.price,
						supermarket_price: shopInfo.supermarket_price,
						market_price: shopInfo.market_price,
						number: item.num
					})
					return itemTotal
				});

				await Promise.all(promises);

				// 强制转换为数值类型
				this.totalPrice = Number(subtotal) + Number(this.delivery_fee)
			},
			async handleCoupon() {
				let colEvent = []
				const res = await canUseCoupon({
					amount: this.totalPrice
				})
				if (!res.length) {
					this.helper.showToast(this.$t('filed.couponEmpty'))
					return
				}
				res.forEach(item => {
					colEvent.push({
						name: item.name + ' ' + `——$${item.amount}`,
						id: item.id,
						amount: item.amount
					})
				})
				this.$refs.onePicker.pickerOpen(colEvent)
			},
			pickerConfirm(event) {
				this.couponName = event.name
				this.couponId = event.id
				this.couponPrice = event.amount
			},
			handleAddress() {
				this.helper.routerNav('/pages/mine/pickAddress', {
					isSelect: 1
				})
				uni.$on('selectAddress', (event) => {
					this.addressInfo = event
				})
			},
			async getDefault() {
				const res = await getDefault()
				if (res) {
					this.addressInfo = res
				}
			},
			async handleCreate() {
				await this.helper.checkForm([
					['string', this.addressInfo.id, this.$t('mine.address')]
				])
				const res = await orderCreate({
					address_id: this.addressInfo.id,
					goods: this.ids,
					couponlog_id: this.couponId,
					payment: 'paypal',
					cart_ids: this.cart_ids
				})
				let payUrl = ""
				if (this.payType == 'paypal') {
					payUrl = await createPaypalPaymentUrl({
						order_id: res.id
					})
				} else {

					let dataPay = await pay_stripe({
						order_id: res.id
					})
					payUrl = dataPay.checkout_url
				}
				// console.log("payment", payUrl)
				this.helper.setStorageSync('status', 'waitLoading')
				uni.navigateBack()
				plus.runtime.openURL(payUrl)
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-radio-group {
		flex: none !important;
	}

	/deep/ .u-radio__text {
		margin-right: 10rpx !important;
	}
</style>